{literal}
<script type="text/javascript">
	$(document).ready(function() {

		$('#busquedaForm').bootstrapValidator({
			fields : {
				dniSearch : {
					validators : {
						digits : {
							message : 'El dni solo pueden ser numeros'
						}
					}
				}
			}
		});
	});
</script>
<script>
$(document).ready(
		function() {
			$('#fechaInp').datepicker({
				  format: "dd/mm/yyyy",
				    language: "es",
				    autoclose: true
			});
			});
	</script>
<script type="text/javascript">
function editar(id){
	var options = {
		    "remote":"registro.php?op=edicion&id="+id
			
		}
	$('#edicion').modal(options);
	
}
function refreshCargaModal(){
	  var creditos = $('#promoSelect option:selected').attr("creditos");
	  var precio = $('#promoSelect option:selected').attr("precio");
      $('#precio').val(precio);
}

function cargarCredito(id){
	
	var dataString = 'idUsr=' + id;
$.ajax({
type : "POST",
url : "usuarios.php?operacion=getById",
data : dataString,
cache : false,
success : function(result) {
	var usrJson = jQuery.parseJSON( result );
	$('#modalLabel').html('Cargar credito: <strong>' + usrJson.apellido + ', ' + usrJson.nombre + '<strong>');
	$('#creditosDisponibles').html('<strong>' + usrJson.creditos  + '<strong>');
	$('#creditosDisponibles').val(usrJson.creditos);
	$('#idUsrCarga').val(usrJson.id);
}
});

$.ajax({
type : "POST",
url : "promocion.php?operacion=getPromos",
cache : false,
success : function(result) {
	var promosJson = jQuery.parseJSON( result );
	var options="";
	$.each(promosJson, function(idx, obj) {
		options+= "<option value='" + obj.id +"' creditos='" + obj.creditos +"' precio='" +obj.precio + "' libre='" + obj.libre +"' >" +obj.descripcion + " - " + (obj.libre == 'S' ? 'Libre' : obj.creditos  + " creditos") +" - $" + obj.precio  +"</option>"
	});
	$('#promoSelect').html(options);
	refreshCargaModal();
}
});

var dataString = 'idUsr=' + id;
$.ajax({
	type : "POST",
	url : "usuarios.php?operacion=getHistory",
	data : dataString,
	cache : false,
	success : function(result) {
		var historicosJson = jQuery.parseJSON( result );
		var table = $("#historicoTable tbody");
		table.empty();
		$.each(historicosJson, function(idx, obj) {
			table.append("<tr><td>"+(obj.libre == 'S' ? 'Libre' : obj.creditos) + "</td><td>"+obj.precio+ "</td><td>"+ obj.fechaCarga+"</td><td>"+ obj.vencimientoCreditos+"</td></tr>");
		});
	}
	});
	
	
	$('#carga').modal();
	
}
$('body').on('hidden.bs.modal', '.modal', function () {
    $(this).removeData('bs.modal');
});
$(document).ready(function() {
$('#promoSelect').on('change', function() {

	refreshCargaModal();

	});
});

$(document).ready(
		function() {
			$("#cargaConfirmaBtn").click(
					function() {
						if($("#nuevaCargaLn").attr('class')=='active'){
						var usrId = $("#idUsrCarga").val();
                        var creditos = $('#promoSelect option:selected').attr("creditos");
                        var libre = $('#promoSelect option:selected').attr("libre");
                        var promoId = $('#promoSelect').val();
						var precio = $("#precio").val();
						
						// Returns successful data submission message when the entered information is stored in database.
						var dataString = 'idUsrCarga=' + usrId + '&creditos='
								+ creditos 	+ '&precio=' + precio + '&libre=' + libre + '&promoId=' + promoId;
						
						$.ajax({
							type : "POST",
							url : "usuarios.php?operacion=cargaCredito",
							data : dataString,
							cache : false,
							success : function(result) {
								var hcaJson = jQuery.parseJSON( result );
								$('#carga').modal('toggle');
								var credit = null;
								if(hcaJson.libre == 'S'){
									credit = "Libre";
								}else{
									credit = hcaJson.creditos;
								}
								document.getElementById('tr_' + usrId).cells[6].innerText = credit;
								document.getElementById('tr_' + usrId).cells[7].innerText = hcaJson.vencimientoCreditos;

							}
						});
						}
						if($("#cargaManualLn").attr('class')=='active'){
// 							$('#frForm')
// 							.data('bootstrapValidator').validate();
// 							if(!$('#frForm')
// 									.data('bootstrapValidator').isValid()){
// 								return;
// 							}
							
							var usrId = $("#idUsrCarga").val();
							var fecha = $("#fechaInp").val();
							var cantidad = $("#cantidadCreditosSelect").val();
							// Returns successful data submission message when the entered information is stored in database.
							var dataString = 'idUsr=' + usrId + '&fecha='
									+ fecha + '&cantidad=' + cantidad;
//	 								+ '&accion=' + accion;
							$.ajax({
								type : "POST",
								url : "usuarios.php?operacion=cargaManual",
								data : dataString,
								cache : false,
								success : function(result) {
									var usrJson = jQuery.parseJSON( result );
										var trId= "tr_" + usrJson.id;
										console.log(usrJson);
										debugger;
	
								$('#carga').modal('toggle');									
								document.getElementById('tr_' + usrId).cells[6].innerText = cantidad;
								document.getElementById('tr_' + usrId).cells[7].innerText = usrJson.vencimientoCreditosStr;
								}
							});
							
							
						}
						
						
						return false;
					});
		});
</script>

{/literal}


<section class="panel panel-primary">
	<header class="panel-heading">
		<h3 class="panel-title">B&uacute;squeda usuarios</h3>
	</header>
	<div class="panel-body">

	<form role="form" action="/usuarios.php?operacion=buscarxfiltro"
		id="busquedaForm" method="post" class="form-horizontal">
		<div class="form-group">
			<label for="dniSearch" class="col-lg-3 control-label">Documento</label>
			<div class="col-lg-5">
				<input type="text" class="form-control" id="dniSearch" name="dniSearch">
			</div>
		</div>
		<div class="form-group">
			<label for="apellidoSearch" class="col-lg-3 control-label">Apellido</label>
			<div class="col-lg-5">
				<input type="text" class="form-control" id="apellidoSearch"
					name="apellidoSearch">
			</div>
		</div>
		<div class="form-group">
			<label for="nombreSearch" class="col-lg-3 control-label">Nombre</label>
			<div class="col-lg-5">
				<input type="text" class="form-control" id="nombreSearch" name="nombreSearch">
			</div>
		</div>


		<div class="form-group">
			<div class="col-lg-7" style="text-align: right">
				<button type="submit" class="btn btn-success btn"
					style="padding-right: 130px; padding-left: 130px;" id="buscar">Buscar</button>
			</div>
		</div>
	</form>
</div>
</section>

<div style="overflow: auto; height: 300px">
{if $operacion eq 'resultados'}
<table class="table table-striped" >
	<tr>
		<th>ID</th>
		<th>Apellido</th>
		<th>Nombre</th>
		<th>Correo electronico</th>
		<th>DNI</th>
		<th>Telefono</th>
		<th>Creditos</th>
		<th>Vencimiento</th>
		<th></th>
		<th></th>
	</tr>
	{section name=uid loop=$usuarios} {assign var=usr value=$usuarios[uid]}
	<tr id="tr_{$usr->id}">
		<td>{$usr->id}</td>
		<td>{$usr->apellido}</td>
		<td>{$usr->nombre}</td>
		<td>{$usr->email}</td>
		<td>{$usr->dni}</td>
		<td>{$usr->telefono}</td>
		<td style="text-align: center">
		{if $usr->libre == 'S'}
					Libre
		{else}
					{$usr->creditos}
		{/if}
		</td>
		<td>{$usr->getVencimientoCreditosStr()}</td>
		<td> <button type="button"class="btn btn-success btn-xs" onclick="cargarCredito({$usr->id});">Cargar credito</button></td>
		<td> <button type="button" class="btn btn-danger btn-xs" onclick="editar({$usr->id});">Editar</button></td>
	</tr>
	{/section}
</table>
{/if}
{if $operacion eq 'sinresultados'}
<strong>La b&uacute;squeda no tiene resultados</strong>
{/if}
</div>



<!-- Modal -->
<div class="modal fade" id="edicion" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" >
    <div class="modal-content" >
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
       
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Guardar cambios</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="carga" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="modalLabel"></h4>
      </div>
      <div class="modal-body">
      	
      	
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active" id="nuevaCargaLn"><a href="#nuevaCargaTab" data-toggle="tab">Nueva carga</a></li>
        <li><a href="#historicoTab" data-toggle="tab">Hist&oacute;rico</a></li>
        <li id="cargaManualLn"><a href="#cargaManualTab" data-toggle="tab">Carga Manual</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="nuevaCargaTab">
        	<br>
        	<form role="form" id="cargaCreditoForm"
					method="post">

					<input type="hidden" id="idUsrCarga" name="idUsrCarga">
					

					<div class="form-group">
						<label for="promoSelect">Paquete</label> <select class="form-control" id="promoSelect"
							name="promoSelect"><option value="0">Elige un paquete</option></select>
					</div>
					
					<div class="form-group">
						<label for="precio">Precio</label> <input type="text"
							class="form-control" id="precio" name="precio"
							placeholder="Precio total">
					</div>

				</form>    
            
        </div>
        <div class="tab-pane" id="historicoTab">
			<div style="overflow: auto; height: 250px">
			<table class="table table-striped" id="historicoTable">
            	<thead>
            	<tr>
            	 <th>Creditos</th><th>Precio</th><th>Fecha</th><th>Vencimiento</th>
            	</tr>
            	</thead>
            	<tbody></tbody>
            </table>
			</div>
            
            
        </div>
        <div class="tab-pane" id="cargaManualTab">
			<div style="overflow: auto; height: 200px">
								<form role="form"  id="frForm" method="post">


					<div class="form-group" style="margin-top:20px">
						<label for="cantidadCreditosSelect">Creditos</label> <select
							class="form-control" id="cantidadCreditosSelect" name="cantidadCreditosSelect">
							<option	value="1">1</option>
							<option	value="2">2</option>
							<option	value="3">3</option>
							<option	value="4">4</option>
							<option	value="5">5</option>
							<option	value="6">6</option>
							<option	value="7">7</option>
							<option	value="8">8</option>
							<option	value="9">9</option>
							<option	value="10">10</option>
							<option	value="11">11</option>
							<option	value="12">12</option>
							<option	value="13">13</option>
							<option	value="14">14</option>
							<option	value="15">15</option>
							<option	value="16">16</option>
							<option	value="17">17</option>
							<option	value="18">18</option>
							<option	value="19">19</option>
							<option	value="20">20</option>
							<option	value="21">21</option>
							<option	value="22">22</option>
							<option	value="23">23</option>
							<option	value="24">24</option>
							<option	value="25">25</option>
							<option	value="26">26</option>
							<option	value="27">27</option>
							<option	value="28">28</option>
							<option	value="29">29</option>
							<option	value="30">30</option>
							<option	value="31">31</option>
								</select>
					</div>
					
					<div class="form-group">
						<label for="fechaInp">Fecha de Vencimiento</label> 
					<input type="text" type="text" class="form-control" id="fechaInp" placeholder="Seleccione una fecha">
												
					</div>			
					

				</form>
			</div>
            
            
        </div>
    </div>
      	
      	
      	
			
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
        <button type="button" id="cargaConfirmaBtn" class="btn btn-primary">Confirmar</button>
      </div>
    </div>
  </div>
</div>